<template>
	<view
		style="background: rgba(0, 0, 0, 0.5);"
		v-if="card"
	>
		<camera
			device-position="front"
			flash="off"
			@error="error"
			style="width: 100%;height: 50vh;background: rgba(0, 0, 0, 0.8);"
			frame-size='large'
			class='camera'
		>
			<cover-image
				src="../../static/img/yuan.png"
				class="scan-img"
			>

			</cover-image>

		</camera>
		<view class="foot">
			<img
				src="/static/img/shib.png"
				alt=""
				@click="takePhoto"
				class="pai shib"
			/>

			<!-- <button
				class="pai"
				@click="takePhoto"
			>立即拍照</button> -->
		</view>

	</view>

	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex";

	export default {
		data() {
			return {
				src: "",
				item: {},
				card: "",
				whetherReplace: ""
			};
		},
		computed: {
			...mapState({
				user: "user"
			})
		},
		methods: {
			takePhoto() {
				const ctx = uni.createCameraContext();
				ctx.takePhoto({
					quality: "high",
					success: res => {
						console.log("----base64----");
						console.log(res.tempImagePath);
						this.src = wx
							.getFileSystemManager()
							.readFileSync(res.tempImagePath, "base64");
						this.facecheck();
					}
				});
			},
			error(e) {
				console.log(e.detail);
			},
			facecheck() {
				uni.showLoading({
					title: "识别中",
					mask: true
				});
				setTimeout(() => {
					uni.hideLoading();
				}, 6000);
				this.$http
					.post(
						"/app/facecheck",
						this.$qs.stringify({
							realName: this.card.username,
							idCard: this.card.card,
							photo: this.src,
							orderNumber: this.item.orderNumber,

							homeId: this.item.homeId,
							phoneNumber: this.user,
							whetherReplace: this.whetherReplace
						}),
						{
							header: {} /* 会覆盖全局header */,
							dataType: "json",
							responseType: "text"
						}
					)
					.then(res => {
						uni.hideLoading();
						console.log(res);
						let that = this;
						let data = res.data;
						if (data.code == 0) {
							uni.switchTab({
								url: "/pages/home/home"
							});
						} else if (data.code == 301) {
							if (data.data.Dialog == 0) {
								uni.showModal({
									title: "提示",
									content: data.msg,
									success: function(res) {
										if (res.confirm) {
											console.log("用户点击确定");
											that.whetherReplace = 1;
											that.facecheck();
										} else if (res.cancel) {
											console.log("用户点击取消");
											that.whetherReplace = "";
											// that.facecheck();
										}
									}
								});
							}
						} else if (data.code == 1) {
							let that = this;
							// console.log(
							// 	"ws://yunchuang.natapp1.cc/websocket/whitelist/0/" +
							// 		this.item.homeInfo.hotelId
							// );
							var socketTask = uni.connectSocket({
								url:
									"ws://yunchuang.natapp1.cc/websocket/whitelist/0/" +
									this.item.homeInfo.hotelId
							});
							// var socketTask = uni.connectSocket({
							// 	url:
							// 		"wss://testimpl.mynatapp.cc/websocket/whitelist/0/" +
							// 		this.item.homeInfo.hotelId
							// });
							var socketOpen = false;
							uni.onSocketOpen(function(res) {
								console.log("WebSocket连接已打开！");
								socketOpen = true;
								console.log(
									`${that.item.hotelName}${that.item.homeInfo.homeNumber}，${
										that.card.username
									}审核失败，手机：${uni.getStorageSync("phone")}，请尽快处理`
								);
								uni.sendSocketMessage({
									data: `${that.item.hotelName}${
										that.item.homeInfo.homeNumber
									}，${that.card.username}审核失败，手机：${uni.getStorageSync(
										"phone"
									)}，请尽快处理`
								});

								uni.showToast({
									icon: "none",
									title: data.msg,
									duration: 2000,
									mask: true
								});
								setTimeout(function() {
									uni.switchTab({
										url: "/pages/home/home"
									});
								}, 2000);
							});
							if (socketOpen == false) {
								uni.sendSocketMessage({
									data: `${that.item.hotelName}${
										that.item.homeInfo.homeNumber
									}，${that.card.username}审核失败，手机：${uni.getStorageSync(
										"phone"
									)}，请尽快处理`
								});

								uni.showToast({
									icon: "none",
									title: data.msg,
									duration: 2000,
									mask: true
								});
								setTimeout(function() {
									uni.switchTab({
										url: "/pages/home/home"
									});
								}, 2000);
							}
						} else {
							uni.showToast({
								icon: "none",
								title: data.msg,
								duration: 2000,
								mask: true
							});
							setTimeout(function() {
								uni.switchTab({
									url: "/pages/home/home"
								});
							}, 2000);
						}
					})
					.catch(err => {});
			}
		},
		onLoad: function(options) {
			console.log(232323);
			this.card = JSON.parse(options.user);

			this.item = uni.getStorageSync("orderList");
			console.log(this.item);
			console.log(this.card);
		}
	};
</script>

<style>
	.scan-img {
		width: 100%;
		/* height: 100vh; */
		height: 50vh;
		margin: auto;
		background-size: 100%;
		display: block !important;
	}

	.pai {
		font-size: 15px;
		text-align: center;
		line-height: 60upx;
		color: white;
		position: absolute;
		bottom: 50px;
		left: 50%;
		width: 160px !important;
		margin-left: -80px;
		height: 160px;
	}

	.camera {
		height: 50vh;
	}

	.foot {
		height: 50vh;
		width: 100%;
		position: relative;
		/* background: rgba(0, 0, 0, 0.8); */
		background: white;
	}

	.footimg {
		height: 100%;
		width: 100%;
		display: block !important;
	}
</style>
